<template>
  <!-- 星座展示 左滑与右滑 以及 进入 -->
  <div
    id="zodiac"
    class="horizontal-center"
    @touchstart="touchstart()"
    @touchmove="touchmove()"
    @touchend="touchend()"
  >
    <transition :name="slider">
      <h1 v-if="enter" :style="nameStyle">{{ this.current.nameZh }}</h1>
    </transition>
    <!-- 滑动动画 -->
    <transition :name="slider">
      <!-- 星座图标 -->
      <img v-if="enter" :src="current.buttonicon" alt="" class="" />
    </transition>
  </div>
</template>

<script>
import TheZodiac from '../../module/zodiac/TheZodiac.js'
export default {
  name: 'TheZodiac',
  props: {
    msg: String,
  },
  data: function() {
    return {
      // left-slider时 左侧星座滑入 true:滑入 false:滑出
      // 对应 leftEnter: false,
      // right-slider时 右侧星座滑入 true:滑入 false:滑出
      // 对应 rightEnter: false,
      // 当前星座滑入
      enter: true,
      // 滑动的方向
      // 动态过渡的值
      // left-slider:向左滑动过渡 right-slider:向右滑动过渡
      slider: '',
      // 当前星座
      current: {},
      // 星座名的样式
      nameStyle: {
        color: '',
      },
    }
  },
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      // 初始化(滑入\滑出)状态
      this.enter = true
      // 每次用户进入星座会被记录
      // 用记录的索引初始化12宫
      this.TheZodiac = localStorage.getItem('zodiacIndex')
        ? new TheZodiac(localStorage.getItem('zodiacIndex'))
        : new TheZodiac()
      // 初始化当前星座
      this.current = this.TheZodiac.current()
      // 初始化样式
      this.nameStyleBuild()
    },

    /**
     * Touchstart
     * 星座图标被触碰
     *
     * @return void
     */
    touchstart() {
      event.preventDefault() //阻止默认事件（长按的时候出现复制）
      this.startX = event.changedTouches[0].pageX
      this.startY = event.changedTouches[0].pageY
    },

    /**
     * Touchmove
     * 滑动判断
     *
     * @return void
     */
    touchmove() {
      // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      event.preventDefault()
      let moveEndX = event.changedTouches[0].pageX
      let X = moveEndX - this.startX

      // 左向右滑动
      if (X > 0) {
        // 设置动态过渡为左向右
        this.slider = 'right-slider'
      }

      // 右向左滑动
      if (X < 0) {
        // 设置动态过渡为右向左
        this.slider = 'left-slider'
      }
    },

    /**
     * Touchend
     * 滑动结束
     *
     * @return void
     */
    touchend() {
      // 手释放，如果在500毫秒内就释放，则取消长按事件
      event.preventDefault()
      this.EndTime = new Date().getTime()
      this.isRecord = false

      if (this.EndTime - this.StarTime < 500) {
        this.EndTime = 0
        this.StarTime = 0
        clearTimeout(this.timeOutEvent) // 清除定时器
        // alert('取消')
      } else {
        // alert('松手')
      }

      // 通过用户的滑动方向完成动画
      switch (this.slider) {
        case 'left-slider':
          // (当前星座)左侧滑出
          this.enter = false
          // (下一个星座)右侧滑入
          setTimeout(
            function() {
              this.current = this.TheZodiac.next()
              this.nameStyleBuild()
              this.slider = 'right-slider'
              this.enter = true
            }.bind(this),
            550
          )
          break
        case 'right-slider':
          // (当前星座)右侧滑出
          this.enter = false
          // (上一个星座)左侧滑入
          setTimeout(
            function() {
              this.current = this.TheZodiac.previous()
              this.nameStyleBuild()
              this.slider = 'left-slider'
              this.enter = true
            }.bind(this),
            550
          )
          break
        default:
      }
    },

    /**
     * GetCurrentNameZh
     * 获取当前星座名
     *
     * @return string
     */
    getCurrentNameZh() {},

    /**
     * nameStyleBuild
     * 改变星座后发生的变化
     *
     * @return void
     */
    nameStyleBuild() {
      // console.log(this.current.ele)
      switch (this.current.ele) {
        case '火':
          this.nameStyle.color = 'indianred'
          break
        case '土':
          this.nameStyle.color = 'lightsalmon'
          break
        case '风':
          this.nameStyle.color = 'mediumseagreen'
          break
        case '水':
          this.nameStyle.color = 'cornflowerblue'
          break
        default:
      }
    },
  },
}
</script>

<style scoped media="screen" lang="less">
/* 预定义 */
@displayRegin: 15rem; /* 星座展示区域宽度 */

/* 存放'星座'图片框的区域 位于中间 */
/* 星座图片框 监听用户滑动事件 */
#zodiac {
  height: inherit;
  width: @displayRegin;
  float: left;
  /* 星座图标资源 */
  img {
    text-align: center;
    height: 10rem;
    width: 10rem;
  }
  h1 {
    position: absolute;
    top: 17rem;
    font-size: 1.5rem;
  }
}

// 容器属性
/* 水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}

/* 滑动特效 */

/* 左侧滑入滑出 */
/* 滑入前初始状态 */
.left-slider-enter {
  opacity: 0;
  transform: translateX(-5rem) translateY(1rem) scale(0.8) rotate(-10deg);
}
/* 滑出后结束状态 */
.left-slider-leave-to {
  opacity: 0;
  transform: translateX(-5rem) translateY(1rem) scale(0.8) rotate(-10deg);
}
/* 滑入后结束状态 */
.left-slider-enter-to {
  opacity: 1;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑出前初始状态 */
.left-slider-leave {
  opacity: 1;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑入持续时间 */
.left-slider-enter-active {
  transition: all 0.5s;
}
/* 滑出持续时间 */
.left-slider-leave-active {
  transition: all 0.5s;
}

/* 右侧滑入滑出 */
/* 滑入前初始状态 */
.right-slider-enter {
  opacity: 0;
  transform: translateX(5rem) translateY(1rem) scale(0.8) rotate(10deg);
}
/* 滑出后结束状态 */
.right-slider-leave-to {
  opacity: 0;
  transform: translateX(5rem) translateY(1rem) scale(0.8) rotate(10deg);
}
/* 滑入后结束状态 */
.right-slider-enter-to {
  opacity: 1;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑出前初始状态 */
.right-slider-leave {
  opacity: 1;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑入持续时间 */
.right-slider-enter-active {
  transition: all 0.5s;
}
/* 滑出持续时间 */
.right-slider-leave-active {
  transition: all 0.5s;
}
</style>
